import React from 'react'
import { connect } from '../util/constqdx-react-redux'
import { add, reduce, addAsync, addTwice } from '../store/actionCreator.js'
import {createSelector} from 'reselect'
//../util/qdx-

const numSelector = createSelector(
  state => state.count,
  //第二个参数是第一个的返回值
  count => (count*2)
)
class Page extends React.Component {
  render() {
    console.log(this.props.count)
    debugger;
    return (
      <div>
        {this.props.count}
        <button
          onClick={() => this.props.add()}
        >
          +
        </button>
        <button
          onClick={() => this.props.reduce()}
        >
          -
        </button>
        <button
          onClick={() => this.props.addTwice()}
        >
          ++
        </button>
        <button
          onClick={() => this.props.addAsync(20)}
        >
          ++++
        </button>
      </div>
    )
  }
}
const mapState = (state) => ({
  count: numSelector(state)
})
const mapDispatch = {
  add, reduce, addAsync, addTwice
}
/* const mapDispatch = (dispatch) => ({
  _add(){
    dispatch(add())
  },
  _reducer(){
    dispatch(reduce())
  }
}) */
export default connect(mapState, mapDispatch)(Page)


/* constructor(props) {
  super(props)
  this.state = {
    count: 0
  }
  store.subscribe(() => {
    console.log(store.getState())
    this.setState({
      ...store.getState()
    })
  })
} */